<template>
  <div class="mymsg">
    <NavBar title="个人信息" left-arrow @click-left="onClickLeft" />
    <ul>
      <li>
        <p>
          <span>头像</span>
          <span class="usetp">
            <img :src="msg.avatar" alt />
          </span>
        </p>
        <p @click="picclick">
          <Icon name="arrow" />
        </p>
      </li>
      <li>
        <p>
          <span>昵称</span>
          <span>{{msg.nickname}}</span>
        </p>
        <p @click="getNickname(msg)">
          <Icon name="arrow" />
        </p>
      </li>
      <li>
        <p>
          <span>手机号</span>
          <span>{{msg.mobile}}</span>
        </p>
        <p>
          <Icon name="arrow" />
        </p>
      </li>
      <li>
        <p>
          <span>性别</span>
          <span>{{msg.sex | sex}}</span>
        </p>
        <p @click="getSex(msg)">
          <Icon name="arrow" />
        </p>
      </li>
      <li>
        <p>
          <span>出生日期</span>
          <span>{{msg.birthday}}</span>
        </p>
        <p @click="birclick">
          <Icon name="arrow" />
        </p>
      </li>
      <li>
        <p>
          <span>所在城市</span>
          <span></span>
        </p>
        <p @click="citclick">
          <Icon name="arrow" />
        </p>
      </li>
      <li>
        <p>
          <span>学科</span>
          <span>{{msg.user_from}}</span>
        </p>
        <p @click="getStu(msg)">
          <Icon name="arrow" />
        </p>
      </li>
      <li>
        <p>
          <span>年级</span>
          <span></span>
        </p>
        <p @click="claclick">
          <Icon name="arrow" />
        </p>
      </li>
    </ul>
    <Popup class="pic" v-model="picShow" round position="bottom" :style="{ height: '30%' }">
      <div @click="getMy">拍照</div>
      <div @click="getMy">从相册选择</div>
      <div @click="del">取消</div>
    </Popup>

    <Cell title="选择单个日期" :value="date" v-show="false" />
    <Calendar v-model="birShow" @confirm="onConfirm" />

    <Popup class="cit" v-model="citShow" round position="bottom" :style="{ height: '60%' }">
      <Area title="标题" :area-list="areaList" @confirm="areais" />
    </Popup>

    <Popup class="cla" v-model="claShow" round position="bottom" :style="{ height: '30%' }">

    </Popup>
  </div>
</template>
<script>
import {
  NavBar,
  Icon,
  Popup,
  Area,
  Calendar,
  Cell,
} from "vant";
export default {
  components: {
    NavBar,
    Icon,
    Popup,
    Area,
    Calendar,
    Cell,
  },
  data() {
    return {
      radio: 1,
      date: "",
      msg: {},
      picShow: false,
      birShow: false,
      citShow: false,
      claShow: false,
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          110200: "县",
          120100: "天津市",
          120200: "县",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          110105: "朝阳区",
          110106: "丰台区",
          120101: "和平区",
          120102: "河东区",
          120103: "河西区",
          120104: "南开区",
          120105: "河北区",
          // ....
        },
      },
    };
  },
  methods: {
    getMy() {},
    del() {
      this.picShow = false;
    },
    areais() {
      this.citShow = false;
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.birShow = false;
      this.date = this.formatDate(date);
    },
    picclick() {
      this.picShow = true;
    },
    birclick() {
      this.birShow = true;
    },
    citclick() {
      this.citShow = true;
    },
    claclick() {
      this.claShow = true;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getNickname(msg) {
      console.log(msg);
      this.$router.push({
        path: "/nickname",
        query: {
          nickname: msg.nickname,
          num: 1,
        },
      });
    },
    getSex(msg) {
      this.$router.push({
        path: "/nickname",
        query: {
          sex: msg.sex,
          num: 2,
        },
      });
    },
    getStu(msg) {
      this.$router.push({
        path: "/nickname",
        query: {
          num: 3,
          id:msg.id
        },
      });
    },
  },
  mounted() {
    let a = localStorage.getItem("obj");
    var obj = JSON.parse(a);
    this.msg = obj;
    console.log(this.msg);
  },
  filters: {
    sex(val) {
      if (val == 0) {
        return "男";
      } else if (val == 1) {
        return "女";
      } else {
        return "保密";
      }
    },
  },
};
</script>

<style scoped>
.mymsg {
  background-color: #eeeeee;
  padding-bottom: 300px;
  color: #999;
}
ul {
  margin-top: 10px;
}
ul > li {
  width: 90%;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
ul > li > p:nth-child(1) {
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ul > li > p:nth-child(2) {
  color: #999;
  font-size: 18px;
}
.usetp > img {
  width: 40px;
  height: 40px;
}
.pic > div {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
</style>